<template>
  <div class="container">
    <h1>洪峰流量过程线</h1>

    <!-- 显示数值开关 -->
    <el-switch
      v-if="isChartVisible"
      v-model="showLabels"
      active-text="显示数值"
      inactive-text="隐藏数值"
      style="margin:10px 0;"
      @change="updateChart"
    ></el-switch>

    <!-- ECharts 容器 -->
    <div
      ref="chartContainer"
      style="width: 100%; height: 400px;"
      v-if="isChartVisible"
    ></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, watch, nextTick } from "vue";
import { ElSwitch } from "element-plus";
import "element-plus/theme-chalk/index.css";

// 定义 props，接收父组件传递的计算结果数据
const props = defineProps({
  resultsData: {
    type: Object,
    required: true, // 必填参数
  },
});

// 响应式变量
const chartContainer = ref(null); // 图表容器引用
const chartInstance = ref(null); // ECharts 实例
const isChartVisible = ref(false); // 控制图表显示
const results = ref([]); // 计算的结果
const showLabels = ref(true); // 是否显示数值标签

// 监听 props.resultsData，当其发生变化时重新生成图表
watch(
  () => props.resultsData,
  async (newData) => {
    if (newData) {
      results.value = calculateFloodDischarge(newData); // 计算洪峰流量
      isChartVisible.value = true; // 确保图表容器可见
      await nextTick(); // 等待 DOM 更新完成
      initOrUpdateChart(); // 初始化或更新图表
    }
  },
  { immediate: true } // 在组件挂载时立即执行
);

// 初始化或更新 ECharts 图表
function initOrUpdateChart() {
  if (!chartContainer.value) {
    console.error("图表容器不可用！");
    return;
  }

  if (!chartInstance.value) {
    // 初始化 ECharts 实例
    chartInstance.value = echarts.init(chartContainer.value, "dark");
  }

  generateEChart(); // 生成图表配置并渲染
}

// 计算洪峰流量
function calculateFloodDischarge(data) {
  const F = parseFloat(data.designParams["流域面积F"]);
  const t = parseFloat(data.floodData[0].tau) || 1; // 假设 tau 一致，默认为 1
  const output = [];

  data.netRainfallData.forEach((netRainfall, index) => {
    const R = parseFloat(netRainfall.r);
    const QMax = parseFloat(data.floodData[index].peak_flow) || 0; // 处理可能存在的无效值
    const Rains = data.rainfallAllocationData.map(
      (row) => parseFloat(row[netRainfall.frequency]) || 0
    );

    const Q24 = calculateQ24(F, QMax, t, R, Rains);

    output.push({
      frequency: netRainfall.frequency,
      Q24: Q24.map((q) => parseFloat(q.toFixed(2))), // 保留两位小数
    });
  });

  return output;
}

// 实现洪峰流量计算算法
function calculateQ24(F, QMax, t, R, Rains) {
  const nCount = Rains.length;
  const Q24 = new Array(nCount).fill(0);

  // 总洪量
  const Sum = 1000 * F * R;

  // 剩余洪量
  const Sum2 = Sum - QMax * 3600;

  // 排除峰值时间的降雨总和
  const dbRains = Rains.reduce((acc, val, idx) => (idx === 14 ? acc : acc + val), 0);

  // 计算标准化降雨对应的总洪量
  const dbSumQ = calculateQ(dbRains, t, F) * 3600;

  // 调整系数
  const dbPer = dbSumQ > 0 ? Sum2 / dbSumQ : 0;

  // 计算 Q24
  Q24[14] = QMax; // 将洪峰流量设置在第 14 小时
  for (let i = 0; i < nCount; i++) {
    if (i === 14) continue;
    Q24[i] = calculateQ(Rains[i], t, F) * dbPer;
  }

  return Q24;
}

// 计算瞬时流量
function calculateQ(Rt, t, F) {
  return 0.278 * Rt / t * F;
}

// 更新图表
function updateChart() {
  generateEChart();
}

// 生成 ECharts 图表
function generateEChart() {
  if (!chartInstance.value) {
    console.error("图表实例不可用！");
    return;
  }

  const timeLabels = Array.from({ length: 24 }, (_, i) => `${i + 1}时`);
  const seriesData = results.value.map((result) => ({
    name: `频率: ${result.frequency}`,
    type: "line",
    data: result.Q24,
    smooth: true,
    label: {
      show: showLabels.value, // 是否显示数值
      position: "top",
    },
  }));

  const options = {
    backgroundColor: "#333", // 黑色背景
    title: {
      text: "洪峰流量过程线 (Q24)",
      left: "center",
      top: "10%",
      textStyle: {
        color: "#fff", // 标题文字颜色
        fontSize: 18,
        fontWeight: "bold",
      },
    },
    tooltip: {
      trigger: "axis", // 鼠标悬浮显示
    },
    legend: {
      top: "15%",
      data: results.value.map((result) => `频率: ${result.frequency}`),
      textStyle: {
        color: "#fff", // 图例文字颜色
      },
    },
    grid: {
      top: "30%",
      left: "10%",
      right: "10%",
      bottom: "10%",
    },
    xAxis: {
      type: "category",
      data: timeLabels,
      name: "时间 (小时)",
      nameLocation: "middle",
      nameGap: 25,
      axisLine: {
        lineStyle: {
          color: "#fff", // X 轴颜色
        },
      },
      axisLabel: {
        color: "#fff", // X 轴文字颜色
      },
    },
    yAxis: {
      type: "value",
      name: "流量 (m³/s)",
      axisLine: {
        lineStyle: {
          color: "#fff", // Y 轴颜色
        },
      },
      axisLabel: {
        color: "#fff", // Y 轴文字颜色
      },
    },
    series: seriesData,
  };

  chartInstance.value.setOption(options);
}
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>
